{% include 'admin/header.html' %}

<body>
  <div class="lyear-layout-web">
    <div class="lyear-layout-container">
      {% include 'admin/nav.html' %}

      <main class="lyear-layout-content">
        <div class="container-fluid">
          <!-- 提示信息 -->
          <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fas fa-info-circle mr-2"></i>
            请填写用户信息以完成添加。确保密码一致并符合强度要求。
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <!-- 卡片标题部分 -->
          <div class="card shadow-lg mb-4">
            <header class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
              <h4 class="card-title mb-0">用户列表</h4>
              <a href="{{ url_for('main.add_user') }}" class="btn btn-light btn-sm">添加用户</a>
            </header>

            <!-- 卡片内容部分 -->
            <div class="card-body">
              <!-- 用户列表表格 -->
              <div class="table-responsive">
                <table class="table table-striped table-hover">
                  <thead class="thead-light">
                    <tr>
                      <th>#</th>
                      <th>用户名</th>
                      <th>工号</th>
                      <th>性别</th>
                      <th>电话</th>
                      <th>宿舍</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for user in users.items %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ user.username }}</td>
                      <td>{{ user.employee_id }}</td>
                      <td>{{ user.gender }}</td>
                      <td>{{ user.phone }}</td>
                      <td>{{ user_dorms[user.id] if user_dorms[user.id] else '未分配' }}</td>
                      <td>
                        <a href="{{ url_for('main.edit_user', id=user.id) }}" class="btn btn-outline-warning btn-sm mr-2">编辑</a>
                        <form action="{{ url_for('main.delete_user', id=user.id) }}" method="POST" style="display:inline;">
                          <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('确定删除吗？')">删除</button>
                        </form>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>

              <!-- 分页控制 -->
              <div class="d-flex justify-content-between align-items-center mt-3">
                <!-- 每页显示选择 -->
                <form method="get" action="{{ url_for('main.user') }}" class="form-inline">
                  <label for="per_page" class="mr-2 mb-0">每页显示:</label>
                  <select name="per_page" id="per_page" class="form-control form-control-sm" onchange="this.form.submit()">
                    <option value="10" {% if per_page == 10 %}selected{% endif %}>10</option>
                    <option value="30" {% if per_page == 30 %}selected{% endif %}>30</option>
                    <option value="50" {% if per_page == 50 %}selected{% endif %}>50</option>
                  </select>
                </form>

                <!-- 分页按钮 -->
                <div>
                  {% if users.has_prev %}
                    <a href="{{ url_for('main.user', page=users.prev_num, per_page=per_page) }}" class="btn btn-outline-secondary btn-sm">上一页</a>
                  {% endif %}

                  <!-- 页码显示 -->
                  <nav aria-label="Page navigation">
                    <ul class="pagination pagination-sm mb-0">
                      {% for page_num in users.iter_pages(left_edge=2, right_edge=2) %}
                        {% if page_num %}
                          {% if page_num == users.page %}
                            <li class="page-item active">
                              <span class="page-link">{{ page_num }}</span>
                            </li>
                          {% else %}
                            <li class="page-item">
                              <a class="page-link" href="{{ url_for('main.user', page=page_num, per_page=per_page) }}">{{ page_num }}</a>
                            </li>
                          {% endif %}
                        {% else %}
                          <li class="page-item disabled">
                            <span class="page-link">...</span>
                          </li>
                        {% endif %}
                      {% endfor %}
                    </ul>
                  </nav>

                  {% if users.has_next %}
                    <a href="{{ url_for('main.user', page=users.next_num, per_page=per_page) }}" class="btn btn-outline-secondary btn-sm">下一页</a>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>

{% include 'admin/footer.html' %}
</body>